<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-01 20:59:56
-->
<template>
  <div>
    <Header/>
    <!-- 体部开始 -->
    <div class="content">
      <div class="wrapper">
       <!-- {{category}} -->
        <div class="title">{{category.name}}</div>
        <div class="inner_content">
          <div class="articleList">
            <!-- 文章列表 -->
              <ul v-if="categoryList.total>0">
                <!-- 标题title -->
                <li class="list_list" v-for="d in categoryList.list" :key="d.id" @click="toArticles(d)">
                  <div class="artitle">&nbsp;&nbsp;●&nbsp;&nbsp;{{d.title}}</div>
                  <div class="list">
                    <!-- 发表时间 阅读次数 -->
                    <span>发表时间：{{d.publishTime | fmtDate}}</span>
                    &nbsp; &nbsp;&nbsp; &nbsp;
                    <span>阅读次数：{{d.readTimes}}</span>
                  </div>
                </li>
              </ul>
              <div class="nodata" v-else>暂无数据</div>
            <!-- 文章列表 -->
            <!-- 分页 -->
            <div class="page">
                <el-pagination
                
                background
                layout="prev, pager, next"
                 @current-change="handleCurrentChange"
                :page-size="categoryList.pageSize"
                :hide-on-single-page="value"
                :total="categoryList.total">
                <!-- categoryList.pageSize 后台获取pageSize数  -->
                <!-- categoryList.total 后台获取的title数 -->
                <!-- @current-change="handleCurrentChange"  点击按钮触发分页事件 -->
                </el-pagination>
            </div>
            <!-- 分页 -->
          </div>
          <!-- 右侧表格开始 -->
          <div class="rank">
            <div class="top">
              <div class="head">最新</div>
              <ul >
                <!-- 标题title -->
                <li class="list_list" v-for="pp in hotspots" :key="pp.id"  @click="toArts(pp)">
                  <div class="artitle" >&nbsp;&nbsp;●&nbsp;&nbsp;{{pp.title}}</div>
                  <div class="list">
                    <!-- 发表时间 -->
                   <span>发表时间：{{pp.publishTime | fmtDate}}</span>            
                  </div>
                </li>
              </ul>
            </div>
            <div class="bottom">
              <div class="head">热门</div>
               <ul>
                <!-- 标题title -->
                <li class="list_list" v-for="item in hotspots" :key="item.id" @click="toA(item)">
                  <div class="artitle">&nbsp;&nbsp;●&nbsp;&nbsp;{{item.title}}</div>
                  <div class="list">
                    <!-- 发表时间 -->
                    <span>阅读次数：{{item.readTimes}}</span>              
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 右侧表格开始 -->

        </div>
      </div>
    </div>
    <!-- 体部结束 -->
    <Footer/>
  </div>
</template>

<script>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"
import { get } from '../utils/request'
export default {
  //注册局部组件
  components:{
    Header,
    Footer
  },
  data(){
    return {
     category:[],
     categoryList:{list:[]},  //res.data.list
     params:{
       page:1,
       pageSize:8
     },
     value:true,
     hotspots:[]
    }
  },
  //监听器
  watch:{
    '$route.query':{
      handler(query){
        //参数发生变化进行重新赋值
        this.category = query;
        //赋值之后再重新加载文章
        this.loadArticle()
      },
      deep:true
    }
  },
  created(){
    this.category = this.$route.query;
    this.loadArticle()
    this.hotspot()
  },
  methods:{
    toA(item){
      this.$router.push({
        path:'/detail',
        query:item
      })
    },
    toArts(pp){
      this.$router.push({
        path:'/detail',
        query:pp
      })
    },
    toArticles(d){
       this.$router.push({
            path:'/detail',
            query:d
          })
    },
    //加载文章
    loadArticle(){
      let url = '/index/article/pageQuery'
      this.params.categoryId = this.category.id
      get(url,this.params).then(res=>{
        this.categoryList = res.data
        //res.data  -  {list:[]}
      })
    },
    // 给分页按钮绑定事件
    handleCurrentChange(page){
      // alert(page) page代表当前点击的按钮
      this.params.page = page
      this.loadArticle()  //加载文章
    },
    hotspot(){
      let url = '/index/article/findHotArticles'
      get(url).then(res=> {
        this.hotspots = res.data
        // console.log(res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .content{
    
    padding: 2em .5em;
    & > .wrapper{
      
      .inner_content{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        & > div{
          // background-color: #fff;
          // height: 800px;
          padding: 1em .5em;
          border-radius: 5px;
        }
       
        .articleList{
          background-color: #fff;
          color:#061b74 ;
          .nodata{
            color: red;
            text-align: center;
            padding: 1em .5em;
          }
          .page{
            text-align: center;
            padding: 1em .5em;
          }
           .list_list{
            & > div{
              line-height: 1.3em;
              padding: 1em .5em;
            }
            border-bottom: 1px solid #ededed;
          }
          flex: 1;
          margin-right: 2em;
        }
        .rank{
          color: #061b74;
          background-color: #e9f3ff;
          flex-basis: 300px;
          .top{
            border-radius: 5px;
            height: 390px;
            background-color:#fff;
            margin-bottom: 20px;
            .head{
              background-color: #0171c5;
              border-radius: 3px;
              color: #fff;
              font-size: 24px;
              display: inline-block;
              padding: .4em .5em;
              
            }
             .list_list{
             div{
              line-height: 0.4em;
              padding: 1em .5em;
            }
             border-bottom: 1px solid #ededed;
            }
             ul > li {
              line-height: 3em;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
          }
          .bottom{
            border-radius: 5px;
            height: 390px;
            background-color: #fff;
             .head{
              background-color: #ff7800;
              border-radius: 3px;
              color: #fff;
              font-size: 24px;
              display: inline-block;
              padding: .4em .5em;

            }
            .list_list{
             div{
              line-height: 0.4em;
              padding: 1em .5em;
            }
             border-bottom: 1px solid #ededed;
            }
             ul > li {
              line-height: 3em;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
          }
        }
      }
      
        ul > li:hover {
              color: #1e58b3;
              cursor: pointer;
            }
      
      .title{
        font-size: 20px;
        font-weight: bold;
        color:#061b74;
        padding: 1em .5em;
      }
    }
    // background-color:#e9f3ff;
    background-image: url('../assets/resoure/img/bbgg.jpg');
    background-size: contain;
  }
</style>